<template>
  <div id="questionSubmitDetailView">
    <a-row :gutter="[24, 24]">
      <a-col :md="12" :xs="24">
        <a-tabs default-active-key="question" type="line">
          <a-tab-pane key="question" title="题目">
            <a-card
              v-if="question"
              :title="question.title"
              style="
                height: 70vh;
                min-height: 400px;
                overflow: auto;
                border: none;
              "
            >
              <a-descriptions
                title="判题条件"
                :column="{ xs: 1, md: 2, lg: 3 }"
              >
                <a-descriptions-item label="时间限制">
                  {{ question.judgeConfig.timeLimit ?? 0 }} MS
                </a-descriptions-item>
                <a-descriptions-item label="内存限制">
                  {{ question.judgeConfig.memoryLimit ?? 0 }} KB
                </a-descriptions-item>
                <a-descriptions-item label="堆栈限制">
                  {{ question.judgeConfig.stackLimit ?? 0 }} KB
                </a-descriptions-item>
              </a-descriptions>
              <MdView :value="question.content || ''" />
              <template #extra>
                <a-space wrap>
                  <a-tag
                    v-for="(tag, index) of question.tags"
                    :key="index"
                    color="green"
                    >{{ tag }}
                  </a-tag>
                </a-space>
              </template>
            </a-card>
          </a-tab-pane>
          <!-- <a-tab-pane key="comment" title="评论" disabled> 评论区</a-tab-pane> -->
          <a-tab-pane key="answer" title="答案">
            <a-tabs
              default-active-key="java"
              type="rounded"
              size="small"
              position="left"
            >
              <a-tab-pane key="java" title="java">
                <div style="height: 58.5vh; min-height: 380px; overflow: auto">
                  <MdView :value="question?.answer ?? '此题暂未提供答案'" />
                </div>
              </a-tab-pane>
            </a-tabs>
          </a-tab-pane>
        </a-tabs>
      </a-col>

      <a-col :md="12" :xs="24">
        <div id="codeArea">
          <a-form :model="form" layout="inline">
            <a-form-item field="language" label="编程语言">
              <a-select
                disabled
                v-model="form.language"
                :style="{ width: '100px' }"
                placeholder="选择语言"
              >
                <a-option>java</a-option>
                <a-option>cpp</a-option>
                <a-option>go</a-option>
              </a-select>
            </a-form-item>
          </a-form>
          <a-button
            type="primary"
            style="min-width: 150px"
            @click="doSubmit"
            shape="round"
            >提交代码
          </a-button>
        </div>
        <CodeEditor
          :value="form.code"
          :language="form.language"
          :handle-change="changeCode"
          style="min-height: 400px; height: 60vh"
        />
        <a-divider size="0" />

        <a-descriptions title="" :column="{ xs: 1, md: 2, lg: 2 }">
          <a-descriptions-item label="消耗内存">
            <template
              v-if="
                !judgeInfo ||
                !judgeInfo.memory ||
                judgeInfo.memory == null ||
                judgeInfo.memory == undefined
              "
            >
              <span>0 byte</span>
            </template>
            <!--            <template v-else-if="judgeInfo.memory <= 1024">-->
            <!--              <span>{{ judgeInfo.memory }} byte</span>-->
            <!--            </template>-->
            <!--            <template v-else-if="judgeInfo.memory <= 1024 * 1024">-->
            <!--              <span>{{ (judgeInfo.memory / 1024).toFixed(2) }} KB</span>-->
            <!--            </template>-->
            <template v-else>
              <span>{{ (judgeInfo.memory / 1).toFixed(2) }} MB</span>
            </template>
          </a-descriptions-item>

          <a-descriptions-item label="执行用时">
            <template
              v-if="
                !judgeInfo ||
                !judgeInfo.time ||
                judgeInfo.time == null ||
                judgeInfo.time == undefined
              "
            >
              <span>0 ms</span>
            </template>
            <template v-else-if="judgeInfo.time < 1000">
              <span>{{ judgeInfo.time }} ms</span>
            </template>
            <template v-else>
              <span>{{ (judgeInfo.time / 1000).toFixed(2) }} S</span>
            </template>
          </a-descriptions-item>

          <a-descriptions-item label="运行方式">
            <span>核心代码模式</span>
          </a-descriptions-item>

          <a-descriptions-item label="详细输出">
            <a-textarea
              :model-value="
                judgeInfo?.detail ? judgeInfo?.detail : judgeInfo?.message
              "
              :auto-size="{ minRows: 2, maxRows: 5 }"
            />
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
    </a-row>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, watchEffect, withDefaults, defineProps } from "vue";
import message from "@arco-design/web-vue/es/message";
import CodeEditor from "@/components/CodeEditor.vue";
import MdView from "@/components/MdView.vue";
import { useRouter } from "vue-router";
import {
  JudgeInfo,
  QuestionSubmitAddRequest,
  QuestionSubmitControllerService,
  QuestionSubmitVO,
  QuestionVO,
} from "../../../generated";

interface Props {
  id: string;
}

const props = withDefaults(defineProps<Props>(), {
  id: () => "",
  code: () => "",
});

const question = ref<QuestionVO>();
const form = ref<QuestionSubmitAddRequest>({
  language: "",
  code: "",
});

const judgeInfo = ref<JudgeInfo>();

//加载页面数据
const loadData = async () => {
  const res =
    await QuestionSubmitControllerService.getQuestionSubmitVoByIdUsingGet(
      props.id as any
    );
  if (res.code === 0) {
    question.value = res.data?.questionVO;
    form.value.code = res.data?.code;
    form.value.language = res.data?.language;
    judgeInfo.value = res.data?.judgeInfo;
  } else {
    message.error("加载失败，" + res.message);
  }
};
/**
 * 提交代码
 */
const doSubmit = async () => {
  if (!question.value?.id) {
    return;
  }

  if (form.value.language != "java") {
    message.error("提交失败,暂不支持该编程语言！");
    return;
  }

  if (form.value.code == "") {
    message.error("请编写完代码，再提交！");
    return;
  }

  const res = await QuestionSubmitControllerService.doSubmitQuestionUsingPost({
    ...form.value,
    questionId: question.value.id,
  });
  if (res.code === 0) {
    message.success("提交成功");
    toQuestionSubmitViewPage();
  } else {
    message.error("提交失败," + res.message);
  }
};
const router = useRouter();
/**
 * 跳转到题目提交页面
 */
const toQuestionSubmitViewPage = () => {
  // router.push({
  //   path: `/question_submit`,
  // });
  // todo 这里暂时跳转到主页题库页面，无法跳转到题目提交页面（bug）
  router.push({
    path: `/`,
  });
};

/**
 * 页面加载时，请求数据
 */
onMounted(() => {
  loadData();
});

const changeCode = (value: string) => {
  form.value.code = value;
};
</script>

<style>
#questionSubmitDetailView {
  max-width: 1400px;
  margin: 0 auto;
}

#viewQuestionView .arco-space-horizontal .arco-space-item {
  margin-bottom: 0 !important;
}

#codeArea {
  display: flex;
}
</style>
